<template>
  <div class="app-wrapper" id="app-wrapper" :class="{ Mobile: isMobile }">
    <div class="main-container">
      <div class="sidebar-wrapper">
        <sidebar
          :isMobile="isMobile"
          class="sidebar-container"
          :detail="false"
          :lightHeight="1"
        ></sidebar>
      </div>
      <div
        class="main-layout"
        id="main-layout"
        :style="{
          left: isMobile ? '0' : '50px',
          padding: isMobile ? '1px' : '20px 40px 20px 20px',
          top: isMobile ? '50px' : '0',
          'overflow-y': isMobile ? 'scroll' : isScroll ? 'scroll' : '',
        }"
      >
        <div class="inspection_container">
          <chart-header :title="'整体进展'"></chart-header>
          <div
            class="tab"
            :style="{
              right: isMobile ? 0 : '70px',
              top: isMobile ? '26px' : '46px',
            }"
          >
            <div
              class="item"
              :class="{ active: !selected }"
              @click="toggleView(0)"
            >
              费用
            </div>
            <div
              class="item"
              :class="{ active: selected }"
              @click="toggleView(1)"
            >
              数量
            </div>
          </div>
          <div class="main-body">
            <div class="charts">
              <div class="legend">
                <div
                  class="item"
                  v-for="(item, index) in legend"
                  :key="index"
                  @click="selectItem(item, index)"
                >
                  <div class="color" :style="initStyle(item)"></div>
                  <div class="text" :class="{ unactive: !item.active }">
                    {{ item.name }}
                  </div>
                </div>
              </div>
              <oneSelect
                :SelectList="SelectList"
                @selectSucessBar="selectSucessBar"
                style="top: 12px; left: 20px"
              ></oneSelect>
              <div
                class="char-box"
                :style="{ height: isMobile ? 280 + 'px' : topHeight + 'px' }"
              >
                <pay-chart
                  class="overall-chart"
                  :flag="false"
                  ref="readerChart1"
                  :renderBindId="'chart-4'"
                  :chartOption="payChartOption"
                ></pay-chart>
              </div>
            </div>
            <div class="footer-list">
              <div
                class="table-box"
                id="table-box"
                :style="{
                  padding: isMobile ? '10px 0px' : '10px 20px 10px 20px',
                }"
              >
                <table class="table" style="width: 100%">
                  <thead>
                    <tr>
                      <th class="b-r text-center">业务</th>
                      <th class="text-center">计划值</th>
                      <th class="text-center">挣值</th>
                      <th class="text-center">实际值</th>
                      <th class="text-center">完成时预计值</th>
                      <th class="text-center">SPI</th>
                      <th class="text-center">CPI</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr v-for="(item, index) in itemDataList" :key="index">
                      <td class="f-16 b-r text-center">
                        {{ item.name }}
                      </td>
                      <td class="text-center">
                        {{ item.plan === null ? '-': item.plan }}
                      </td>
                      <td class="text-center">
                        {{ item.get  === null ? '-': item.get }}
                      </td>
                      <td class="text-center">
                        {{ item.real  === null ? '-': item.real }}
                      </td>
                      <td class="text-center">
                        {{ item.ok  === null ? '-': item.ok }}
                      </td>
                      <td class="text-center">
                        {{ item.spi  === null ? '-': item.spi  }}
                      </td>
                      <td class="text-center">
                        {{ item.cpi  === null ? '-': item.cpi }}
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {
  overallProgress,
  overallProgressUnit
} from '@/api/api'
import * as echarts from 'echarts'
import { ItemDataList, Legend2 } from '@/json/cashflow'
import { isMobile } from '@/utils/index'
import PayChart from '@/components/pay_chart.vue'
import Sidebar from '@/components/Sidebar.vue'
import ChartHeader from '@/components/chart_header.vue'
import oneSelect from './chart_select.vue'
import res from './a'
import dayjs from 'dayjs'
import { IndexJson } from '@/json/index'
export default {
  name: 'Cashflow',
  components: {
    ChartHeader,
    Sidebar,
    PayChart,
    oneSelect
    // twoSelect
  },
  data () {
    return {
      SelectList: IndexJson.oneSelectList, // 折线图下拉选数据
      SelectListTwo: IndexJson.twoSelectList,
      selected: 0,
      isScroll: false,
      areaList: [], // 项目区域列表数据
      barSelectList: [], // 图表下拉选 折线数据
      lineSelectList: [], // 图表下拉选 柱状图数据
      contrastsList: [], // 图表下拉选 右侧数据
      itemDataList: ItemDataList, // 现金流列表
      topHeight: 300, // 项目现金流表 高度
      isMobile: false,
      legend: Legend2,
      overAllData: {},
      legendDataCopy: [],
      unitData: {},
      payChartOption: {
        // 现金流图表echart数据原型
        tooltip: {
          show: true,
          trigger: 'axis',
          axisPointer: {
            show: false,
            type: 'cross',
            label: {
              show: false
            }
          },
          formatter: function (params) {
            var res = '<ul class="formatter-ul">'
            res += '<div class="title">' + params[0].axisValueLabel + '</div>'
            for (let index = 0; index < params.length; index++) {
              const element = params[index]
              const isUndefined = typeof element.value === 'undefined'
              if (!isUndefined) {
                if (element.seriesId.includes(1)) {
                  var sub = '<li class="formatter-li">'
                  var type = ''
                  if (element.seriesType === 'bar') {
                    type =
                      "<div class='pre-bar' style='background:" +
                      element.color +
                      "'></div>"
                  } else {
                    if (element.seriesId.includes('d')) {
                      type =
                        "<div class='pre-line-dashed'><span style='background:" +
                        element.color +
                        "'></span> <span style='background:" +
                        element.color +
                        "'></span> <span style='background:" +
                        element.color +
                        "'></span> </div>"
                    } else {
                      type =
                        "<div class='pre-line' style='background:" +
                        element.color +
                        "'></div>"
                    }
                  }
                  let val = Math.abs(Number(element.value).toFixed(3))
                  if (val <= 0) {
                    val = Math.abs(Number(element.value).toFixed(4))
                  }
                  if (val <= 0) {
                    val = Math.abs(Number(element.value).toFixed(5))
                  }
                  if (val <= 0) {
                    val = Math.abs(Number(element.value).toFixed(6))
                  }
                  var seriesName =
                    "<div class='series-name'>" + element.seriesName + '</div>'
                  var value =
                    "<div class='series-value'>" +
                   val +
                    '</div>'
                  sub += type
                  sub += seriesName
                  sub += value
                  sub += '</li>'
                  res += sub
                }
              }
            }
            return res
          },
          backgroundColor: 'rgba(0, 0, 0, 0.3)',
          padding: 10,
          textStyle: {
            color: '#fff'
          }
        },
        grid: {
          left: this.isMobile ? 30 : 40,
          right: this.isMobile ? 40 : 40,
          bottom: 60,
          top: this.isMobile ? 30 : 40
        },
        dataZoom: [
          {
            id: 'dataZoomX',
            start: 0, // 默认为0
            end: 100, // 默认为100
            type: 'slider',
            show: false,
            xAxisIndex: [0, 1, 2],
            handleSize: 0, // 滑动条的 左右2个滑动条的大小
            height: 8, // 组件高度
            left: 50, // 左边的距离
            right: 40, // 右边的距离
            bottom: 26, // 右边的距离
            handleColor: '#ddd', // h滑动图标的颜色
            handleStyle: {
              borderColor: '#cacaca',
              borderWidth: '1',
              shadowBlur: 2,
              background: '#ddd',
              shadowColor: '#ddd'
            },
            fillerColor: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
              {
                offset: 0,
                color: '#1eb5e5'
              },
              {
                offset: 1,
                color: '#5ccbb1'
              }
            ]),
            backgroundColor: '#ddd', // 两边未选中的滑动条区域的颜色
            showDataShadow: false, // 是否显示数据阴影 默认auto
            showDetail: false, // 即拖拽时候是否显示详细数值信息 默认true
            handleIcon:
              'M-292,322.2c-3.2,0-6.4-0.6-9.3-1.9c-2.9-1.2-5.4-2.9-7.6-5.1s-3.9-4.8-5.1-7.6c-1.3-3-1.9-6.1-1.9-9.3c0-3.2,0.6-6.4,1.9-9.3c1.2-2.9,2.9-5.4,5.1-7.6s4.8-3.9,7.6-5.1c3-1.3,6.1-1.9,9.3-1.9c3.2,0,6.4,0.6,9.3,1.9c2.9,1.2,5.4,2.9,7.6,5.1s3.9,4.8,5.1,7.6c1.3,3,1.9,6.1,1.9,9.3c0,3.2-0.6,6.4-1.9,9.3c-1.2,2.9-2.9,5.4-5.1,7.6s-4.8,3.9-7.6,5.1C-285.6,321.5-288.8,322.2-292,322.2z'
          },
          {
            type: 'inside',
            show: false,
            xAxisIndex: [0, 1, 2],
            start: 0, // 默认为1
            end: 100 // 默认为100
          }
        ],
        xAxis: [
          {
            type: 'category',
            data: [],
            axisLine: {
              onZero: true,
              lineStyle: {
                color: '#fff'
              }
            },
            splitLine: { show: false },
            splitArea: { show: false },
            axisLabel: {
              fontSize: this.isMobile ? 8 : 10,
              color: '#fff'
            },
            axisTick: {
              show: false
            }
          },

          {
            type: 'category',
            data: [],
            position: 'bottom',
            axisPointer: {
              show: false,
              triggerTooltip: false
            },
            axisLabel: {
              lineHeight: 40,
              align: 'center'
            },
            axisLine: { onZero: true, show: false },
            splitLine: { show: false },
            axisTick: { show: false }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '(亿元)',
            min: -1,
            max: 1,
            interval: this.isMobile ? 2 : 1,
            axisTick: {
              show: false,
              lineStyle: {
                color: '#fff',
                width: 1
              }
            },
            axisLabel: {
              formatter: '{value}',
              color: '#fff'
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#fff',
                width: 1
              }
            },
            splitLine: { show: false },
            nameTextStyle: {
              align: 'center',
              fontSize: this.isMobile ? 8 : 15,
              width: 200
            }
          },
          {
            type: 'value',
            name: '(亿元)',
            min: 0,
            max: 1,
            interval: this.isMobile ? 1 : 2,
            axisTick: {
              show: false,
              lineStyle: {
                color: '#fff',
                width: 1
              }
            },
            axisLabel: {
              formatter: '{value}',
              color: '#fff'
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#fff',
                width: 1
              }
            },
            splitLine: { show: false },
            nameTextStyle: {
              fontSize: this.isMobile ? 8 : 15,
              align: 'center',
              width: 200
            }
          }
        ],
        series: [
          {
            name: '计划值(月)',
            type: 'bar',
            typeKey: 1,
            id: '计划值(月)1',
            barWidth: this.isMobile ? 3 : 5,
            data: [],
            // stack: 'one',
            itemStyle: {
              color: 'rgb(0, 206, 103)',
              opacity: 1
            }
          },
          {
            name: '挣值(月)',
            id: '挣值(月)1',
            type: 'bar',
            typeKey: 2,
            barWidth: this.isMobile ? 3 : 5,
            data: [],
            // stack: 'one',
            itemStyle: {
              color: 'rgb(255, 209, 0)',
              opacity: 1
            }
          },
          {
            name: '实际值(月)',
            type: 'bar',
            id: '实际值(月)1',
            typeKey: 3,
            barWidth: this.isMobile ? 3 : 5,
            data: [],
            // stack: 'one',
            itemStyle: {
              color: 'rgb(0, 140, 220)',
              opacity: 1
            }
          },
          {
            name: '计划值(累计)',
            type: 'line',
            yAxisIndex: 1,
            lineStyle: {
              width: this.isMobile ? 1 : 2,
              opacity: 1
            },
            data: [],
            smooth: true,
            showSymbol: false,
            typeKey: 1,
            id: '计划值(累计)1',
            hoverAnimation: false,
            itemStyle: {
              opacity: 1,
              color: 'rgb(0, 206, 103)'
            }
          },
          {
            name: '挣值(累计)',
            type: 'line',
            yAxisIndex: 1,
            lineStyle: {
              width: this.isMobile ? 1 : 2,
              opacity: 1
            },
            data: [],
            showSymbol: false,
            hoverAnimation: false,
            typeKey: 2,
            id: '挣值(累计)1',
            smooth: true,
            itemStyle: {
              opacity: 1,
              color: 'rgb(255, 209, 0)'
            }
          },
          {
            name: '实际值(累计)',
            type: 'line',
            yAxisIndex: 1,
            lineStyle: {
              width: this.isMobile ? 1 : 2,
              opacity: 1
            },
            data: [],
            showSymbol: false,
            hoverAnimation: false,
            typeKey: 3,
            id: '实际值(累计)1',
            smooth: true,
            itemStyle: {
              opacity: 1,
              color: 'rgb(0, 140, 220)'
            }
          },
          {
            name: '完成时预计值',
            type: 'line',
            yAxisIndex: 1,
            lineStyle: {
              width: this.isMobile ? 1 : 2,
              opacity: 1,
              type: 'dashed'
            },
            data: [],
            showSymbol: false,
            hoverAnimation: false,
            typeKey: 4,
            id: '完成时预计值1',
            smooth: true,
            itemStyle: {
              opacity: 1,
              color: 'rgb(0, 140, 220)'
            }
          }
        ]
      }
    }
  },
  methods: {
    toggleView: function (select) {
      this.payChartOption.yAxis[0].name = this.selected ? '(亿元)' : '(万点)'
      this.payChartOption.yAxis[1].name = this.selected ? '(亿元)' : '(万点)'
      this.selected = select
      this.getOverallData(select)
      this.legend.forEach((item) => {
        item.active = true
      })
    },
    selectItem: function (item, index) {
      item.active = !item.active
      if (!item.active) {
        const data = JSON.parse(JSON.stringify(this.payChartOption.series[index].data))
        this.legendDataCopy[index] = data
        this.payChartOption.series[index].data = []
      } else {
        this.payChartOption.series[index].data = this.legendDataCopy[index]
      }
      setTimeout(() => {
        this.$EventBus.$emit('rePainting')
      }, 100)
    },
    initStyle: function (item) {
      const style = {}
      if (item.type === 1) {
        style.background = item.bg
        style.width = '10px'
        style.height = '10px'
        style['border-radius'] = '2px'
      } else if (item.type === 2) {
        style.width = '16px'
        style.height = '4px'
        style.background = item.bg
      } else {
        style.width = '16px'
        style.height = '1px'
        style['border-top'] = `1px dashed ${item.bg}`
      }
      return style
    },

    doWithData: function (data, onSelectArr, twoSelectArr) {
      var response = {}
      onSelectArr.forEach((itemOne) => {
        twoSelectArr.forEach((itemTwo) => {
          response[`${itemTwo}-${itemOne}`] = (data[`${itemTwo}-${itemOne}`] || []).filter((item) => { return item.value != null })
        })
      })
      const yearMap = {}
      const monthMap = {}
      const denominator = this.select ? 10000 : 100000000
      for (const key in response) {
        if (Object.hasOwnProperty.call(response, key)) {
          const item = response[key] || []
          if (item.length) {
            item.forEach((v) => {
              const year = dayjs(v.key).format('YYYY')
              const yearMonth = dayjs(v.key).format('YYYYMM')
              yearMap[year] = year
              monthMap[yearMonth] = yearMonth
            })
          }
        }
      }
      const keys = Object.keys(yearMap)
      const startM = dayjs((Object.keys(monthMap)[0])).format('M')
      const endM = dayjs((Object.keys(monthMap)[Object.keys(monthMap).length - 1])).format('M')
      for (const key in response) {
        if (Object.hasOwnProperty.call(response, key)) {
          const item = response[key] || []
          const yearMonthMap = {}
          if (item.length) {
            item.forEach((v) => {
              const yearMonth = dayjs(v.key).format('YYYY-MM')
              yearMonthMap[yearMonth] = yearMonth
            })
            const itemCopy = JSON.stringify(item)
            for (let i = 0; i < keys.length; i++) {
              const year = keys[i]
              debugger
              for (let j = Number(i === 0 ? startM : 1); j <= Number(i === keys.length - 1 ? endM : 12); j++) {
                const month = j < 10 ? `0${j}` : j
                if (!itemCopy.includes(`${year}-${month}`)) {
                  item.push({
                    key: `${year}-${month}`,
                    value: null
                  })
                }
              }
            }
            const ks = Object.keys(yearMonthMap)
            const maxYM = ks[ks.length - 1]
            item.sort((a, b) => a.key.localeCompare(b.key))
            for (let i = 0; i < item.length; i++) {
              const element = item[i]
              if (i > 0 && !element.value && !key.includes('月') && dayjs(element.key).format('YYYYMM') <= dayjs(maxYM).format('YYYYMM')) {
                element.value = item[i - 1].value
              }
              if (i > 0 && !element.value && key.includes('月') && dayjs(element.key).format('YYYYMM') <= dayjs(maxYM).format('YYYYMM')) {
                element.value = item[i - 1].value
              }
            }
          }
        }
      }
      const planMonthData = []
      onSelectArr.forEach((item) => {
        const arr = response[`计划值（月）-${item}`]
        arr.forEach((v) => {
          if (v.value) {
            v.value = (Number(v.value) / denominator).toFixed(2)
          }
          const i = planMonthData.findIndex((k) => {
            return k.key === v.key
          })
          if (i > -1) {
            if (planMonthData[i].value) {
              planMonthData[i].value =
                Number(planMonthData[i].value) + (Number(v.value) || 0)
            } else {
              planMonthData[i] = v
            }
          } else {
            planMonthData.push(v)
          }
        })
      })
      const planMonthDataValue = []
      planMonthData.forEach((item) => {
        planMonthDataValue.push(item.value ? Number(item.value) : item.value)
      })

      const getMonthData = []
      onSelectArr.forEach((item) => {
        const arr = response[`挣值（月）-${item}`]
        arr.forEach((v) => {
          if (v.value) {
            v.value = (Number(v.value) / denominator).toFixed(2)
          }
          const i = getMonthData.findIndex((k) => {
            return k.key === v.key
          })
          if (i > -1) {
            if (getMonthData[i].value) {
              getMonthData[i].value =
                Number(getMonthData[i].value) + (Number(v.value) || 0)
            } else {
              getMonthData[i] = v
            }
          } else {
            getMonthData.push(v)
          }
        })
      })
      const getMonthDataValue = []
      getMonthData.forEach((item) => {
        getMonthDataValue.push(item.value ? Number(item.value) : item.value)
      })

      const realMonthData = []
      onSelectArr.forEach((item) => {
        const arr = response[`实际值（月）-${item}`]
        arr.forEach((v) => {
          if (v.value) {
            v.value = (Number(v.value) / denominator).toFixed(2)
          }
          const i = realMonthData.findIndex((k) => {
            return k.key === v.key
          })
          if (i > -1) {
            if (realMonthData[i].value) {
              realMonthData[i].value =
                Number(realMonthData[i].value) + (Number(v.value) || 0)
            } else {
              realMonthData[i] = v
            }
          } else {
            realMonthData.push(v)
          }
        })
      })
      const realMonthDataValue = []
      realMonthData.forEach((item) => {
        realMonthDataValue.push(item.value ? Number(item.value) : item.value)
      })

      const planAllData = []
      onSelectArr.forEach((item) => {
        const arr = response[`计划值（累计）-${item}`]
        arr.forEach((v) => {
          if (v.value) {
            v.value = (Number(v.value) / denominator).toFixed(2)
          }
          const i = planAllData.findIndex((k) => {
            return k.key === v.key
          })
          if (i > -1) {
            if (planAllData[i].value) {
              planAllData[i].value =
                Number(planAllData[i].value) + (Number(v.value) || 0)
            } else {
              planAllData[i] = v
            }
          } else {
            planAllData.push(v)
          }
        })
      })
      const planAllDataValue = []
      planAllData.forEach((item) => {
        planAllDataValue.push(item.value ? Number(item.value) : item.value)
      })

      const getAllData = []
      onSelectArr.forEach((item) => {
        const arr = response[`挣值（累计）-${item}`]
        arr.forEach((v) => {
          if (v.value) {
            v.value = (Number(v.value) / denominator).toFixed(2)
          }
          const i = getAllData.findIndex((k) => {
            return k.key === v.key
          })
          if (i > -1) {
            if (getAllData[i].value) {
              getAllData[i].value =
                Number(getAllData[i].value) + (Number(v.value) || 0)
            } else {
              getAllData[i] = v
            }
          } else {
            getAllData.push(v)
          }
        })
      })
      const getAllDataValue = []
      getAllData.forEach((item) => {
        getAllDataValue.push(item.value ? Number(item.value) : item.value)
      })
      const reaAllData = []
      onSelectArr.forEach((item) => {
        const arr = response[`实际值（累计）-${item}`]
        arr.forEach((v) => {
          if (v.value) {
            v.value = (Number(v.value) / denominator).toFixed(2)
          }
          const i = reaAllData.findIndex((k) => {
            return k.key === v.key
          })
          if (i > -1) {
            if (reaAllData[i].value) {
              reaAllData[i].value =
                +reaAllData[i].value + (Number(v.value) || 0)
            } else {
              reaAllData[i] = v
            }
          } else {
            reaAllData.push(v)
          }
        })
      })
      const reaAllDataValue = []
      reaAllData.forEach((item) => {
        reaAllDataValue.push(item.value ? Number(item.value) : item.value)
      })

      const okData = []
      const okDataValue = []
      onSelectArr.forEach((item) => {
        const arr = response[`完成时预计值-${item}`]
        console.log(`完成时预计值-${item}`, arr)
        arr.forEach((v) => {
          if (v.value) {
            v.value = (Number(v.value) / denominator).toFixed(2)
          }
          const i = okData.findIndex((k) => {
            return k.key === v.key
          })
          if (i > -1) {
            if (okData[i].value) {
              okData[i].value = +okData[i].value + (Number(v.value) || 0)
            } else {
              okData[i] = v
            }
          } else {
            okData.push(v)
          }
        })
      })
      okData.forEach((item) => {
        okDataValue.push(item.value ? Number(item.value) : item.value)
      })
      let Y1Max = 0
      const allBarArr = [
        ...planMonthDataValue,
        ...getMonthDataValue,
        ...realMonthDataValue
      ]
      for (let i = 0; i < allBarArr.length; i++) {
        const item = allBarArr[i]
        if (item && Math.abs(Number(item)) > Y1Max) {
          Y1Max = item
        }
      }
      if (!Y1Max) {
        Y1Max = 1.0
      }
      Y1Max = Math.abs(Y1Max)
      const Y1AddSpce = Number(Y1Max) / 5
      Y1Max = Number(Y1Max) + Y1AddSpce // y轴上下留白
      if (Y1Max % 1 !== 0) {
        Y1Max = (Y1Max).toFixed(2)
      }
      this.payChartOption.yAxis[0].min = 0 // -Y1Max
      this.payChartOption.yAxis[0].max = Y1Max
      this.payChartOption.yAxis[0].interval = Y1Max / 5

      let Y2Max = 0
      const allLineArr = [
        ...planAllDataValue,
        ...getAllDataValue,
        ...reaAllDataValue,
        ...okDataValue
      ]
      for (let i = 0; i < allLineArr.length; i++) {
        const item = allLineArr[i]
        if (item && Math.abs(Number(item)) > Y2Max) {
          Y2Max = item
        }
      }
      if (!Y2Max) {
        Y2Max = 1
      }
      const Y2AddSpce = Number(Y2Max) / 5
      Y2Max = Number(Y2Max) + Y2AddSpce // y轴上下留白
      if (Y2Max % 1 !== 0) {
        Y2Max = Y2Max.toFixed(4)
      }
      this.payChartOption.yAxis[1].max = Y2Max
      this.payChartOption.yAxis[1].interval = Y2Max / 5
      this.payChartOption.series[0].data = [...[], ...planMonthDataValue]
      this.payChartOption.series[1].data = [...[], ...getMonthDataValue]
      this.payChartOption.series[2].data = [...[], ...realMonthDataValue]
      this.payChartOption.series[3].data = [...[], ...planAllDataValue]
      this.payChartOption.series[4].data = [...[], ...getAllDataValue]
      this.payChartOption.series[5].data = [...[], ...reaAllDataValue]
      this.payChartOption.series[6].data = [...[], ...okDataValue]

      const X2 = []
      const X0 = []
      const X1 = []
      for (let index = 0; index < keys.length; index++) {
        X2.push({
          value: keys[index],
          textStyle: {
            height: 90,
            fontSize: 14,
            lineHeight: 90,
            color: '#fff'
          }
        })
        for (let j = Number(index === 0 ? startM : 1); j <= Number((index === keys.length - 1) ? endM : 12); j++) {
          X1.push({
            value: j,
            textStyle: {
              height: 50,
              fontSize: 13,
              lineHeight: 50,
              color: '#fff'
            }
          })
          X0.push(`M${j}`)
        }
      }
      this.payChartOption.xAxis[0].data = X0
      this.payChartOption.xAxis[1].data = X2
      // this.payChartOption.xAxis[2].data = X2
      setTimeout(() => {
        this.$EventBus.$emit('rePainting')
      }, 100)
    },
    getValue: function (value) {
      const denominator = this.select ? 10000 : 100000000
      if (value) {
        var val = (Number(value) / denominator).toFixed(2)
        if (val === '0.00') {
          return 0
        } else {
          return val
        }
      } else {
        return value
      }
    },
    findValue: function (arr) {
      let value = null
      for (let index = 0; index < arr.length; index++) {
        const element = arr[index]
        if (dayjs(element.key).format('YYYY-MM') === dayjs().format('YYYY-MM')) {
          value = this.getValue(element.value)
          break
        }
      }
      return value
    },
    getKey: function (j) {
      var key = null
      if (j === 0) {
        key = 'plan'
      } else if (j === 1) {
        key = 'get'
      } else if (j === 2) {
        key = 'real'
      } else if (j === 3) {
        key = 'ok'
      }
      return key
    },
    getTableData: function (data, onSelectArr, twoSelectArr) {
      const ItemDataList = [
        { 'name': '设计', 'plan': null, 'get': null, 'real': null, 'ok': null, 'spi': null, 'cpi': null },
        { 'name': '采购', 'plan': null, 'get': null, 'real': null, 'ok': null, 'spi': null, 'cpi': null },
        { 'name': '施工', 'plan': null, 'get': null, 'real': null, 'ok': null, 'spi': null, 'cpi': null },
        { 'name': '全部', 'plan': null, 'get': null, 'real': null, 'ok': null, 'spi': null, 'cpi': null }
      ]
      onSelectArr.forEach((itemOne, i) => {
        twoSelectArr.forEach((itemTwo, j) => {
          ItemDataList[i][this.getKey(j)] = this.findValue(data[`${itemTwo}-${itemOne}`] || [])
        })
      })
      ItemDataList[0].spi = data.designSPI[0] ? data.designSPI[0].value ? Number(data.designSPI[0].value).toFixed(2) : '' : ''
      ItemDataList[0].cpi = data.designCPI[0] ? data.designCPI[0].value ? Number(data.designCPI[0].value).toFixed(2) : '' : ''
      ItemDataList[1].spi = data.purchaseSPI[0] ? data.purchaseSPI[0].value ? Number(data.purchaseSPI[0].value).toFixed(2) : '' : ''
      ItemDataList[1].cpi = data.purchaseCPI[0] ? data.purchaseCPI[0].value ? Number(data.purchaseCPI[0].value).toFixed(2) : '' : ''
      ItemDataList[2].spi = data.constructSPI[0] ? data.constructSPI[0].value ? Number(data.constructSPI[0].value).toFixed(2) : '' : ''
      ItemDataList[2].cpi = data.constructCPI[0] ? data.constructCPI[0].value ? Number(data.constructCPI[0].value).toFixed(2) : '' : ''
      ItemDataList[3].spi = data.allSPI[0] ? data.allSPI[0].value ? Number(data.allSPI[0].value).toFixed(2) : '' : ''
      ItemDataList[3].cpi = data.allCPI[0] ? data.allCPI[0].value ? Number(data.allCPI[0].value).toFixed(2) : '' : ''
      this.itemDataList = ItemDataList
    },
    /**
     * 获取 项目现金流数据
     * @param              { Object }        params           入参   包含属性代表查询某一个项目 反之 查询全部
     * @property           { String }        projectId        项目id
     */
    getOverallData: async function (select) {
      let overAllData = {}
      if (select) {
        overAllData = await overallProgressUnit(
          this.$route.query.projectId
        )
      } else {
        overAllData = await overallProgress(this.$route.query.projectId)
      }
      for (const key in overAllData) {
        if (Object.hasOwnProperty.call(overAllData, key)) {
          const element = overAllData[key] || []
          element.forEach((item) => {
            item.key = dayjs(item.key).format('YYYY-MM')
          })
        }
      }

      this.overAllData = overAllData
      this.getTableData(JSON.parse(JSON.stringify(this.overAllData)), ['设计', '采购', '施工', '全部'],
        [
          '计划值（累计）',
          '挣值（累计）',
          '实际值（累计）',
          '完成时预计值'
        ])
      // 实际值（月）-施工
      this.doWithData(
        JSON.parse(JSON.stringify(this.overAllData)),
        ['设计', '采购', '施工'],
        [
          '计划值（月）',
          '挣值（月）',
          '实际值（月）',
          '计划值（累计）',
          '挣值（累计）',
          '实际值（累计）',
          '完成时预计值'
        ]
      )
    },
    selectSucessBar: function (r) {
      this.legend.forEach((item) => {
        item.active = true
      })
      const overAllDataC = JSON.parse(JSON.stringify(this.overAllData))
      const oneArr = []
      r.forEach((item) => {
        if (item.label !== '全部') {
          oneArr.push(item.label)
        }
      })
      let overAllData = {}
      if (oneArr.length === 3) {
        overAllData = overAllDataC
      } else {
        oneArr.forEach((v) => {
          for (const key in overAllDataC) {
            if (Object.hasOwnProperty.call(overAllDataC, key)) {
              if (key.includes(v)) {
                overAllData[key] = overAllDataC[key]
              }
            }
          }
        })
      }
      this.doWithData(
        overAllData,
        oneArr,
        [
          '计划值（月）',
          '挣值（月）',
          '实际值（月）',
          '计划值（累计）',
          '挣值（累计）',
          '实际值（累计）',
          '完成时预计值'
        ]
      )
    }
  },
  created () {
    this.isMobile = isMobile()
  },
  mounted: async function () {
    this.topHeight = this.isMobile
      ? $(window).height() - 170
      : $(window).height() - 360
    this.getOverallData()
    this.$forceUpdate()
    $(window).resize(() => {
      this.isMobile = isMobile()
      this.topHeight = this.isMobile
        ? $(window).height() - 170
        : $(window).height() - 360
      this.$EventBus.$emit('rePainting')
      this.$forceUpdate()
    })
  }
}
</script>
<style lang="scss" scoped>
.inspection_container {
  height: 100%;
  padding-top: 20px;
}

.header {
  height: 40px;
  width: 100%;
  .title {
    margin-left: 30px;
    margin-top: 11px;
    height: 18px;
    line-height: 18px;
    padding-left: 10px;
    border-left: 2px solid #008bf3;
    font-weight: 700;
    font-size: 17px;
  }
}

.main-body {
  .charts {
    position: relative;
  }
  .legend {
    width: 100%;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    .item {
      cursor: pointer;
      display: flex;
      width: 100px;
      height: 30px;
      align-items: center;
      justify-content: center;
      .text {
        margin-left: 4px;
        color: #fff;
      }
    }
  }
  .footer-list {
    header {
      height: 40px;
      line-height: 40px;
      width: 100%;
      margin-bottom: 2px;
      .title {
        margin-left: 30px;
        margin-top: 11px;
        height: 18px;
        line-height: 18px;
        padding-left: 10px;
        border-left: 2px solid #008bf3;
        font-weight: 700;
        font-size: 17px;
      }
    }
  }
  .table-box {
    height: 180px;
    // background: #ffffff;
    // border-top: 2px solid #eff0f4;
    padding: 10px 15px;
  }
}
.flag {
  vertical-align: middle;
}

.projectName-box {
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
  color: #bababa !important;
}
.f-16 {
  font-size: 16px;
}
.b-r {
  border-right: 1px solid #fff;
}
tr,
td {
  color: #fff;
  vertical-align: middle !important;
}

.table > thead > tr > th {
  border: none !important;
  background: none !important;
  color: #fff !important;
  font-size: 16px;
  font-weight: 700;
}
.table thead tr {
  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;
  background: #233a61;
}
.table tbody tr {
  background: #184b70;
}
.tab {
  position: absolute;
  .item {
    cursor: pointer;
    float: left;
    text-align: center;
    width: 60px;
    font-size: 16px;
    font-weight: 700;
    height: 30px;
    margin: 0 5px;
    border-bottom: 2px solid #ccc;
    color: #ccc;
  }
  .active {
    border-bottom: 2px solid #fff;
    color: #fff;
  }
}
.unactive {
  color: #747474 !important;
}
</style>
